<script type="text/javascript"><!--//--><![CDATA[//><!--

	var grid_reload = function(){
		$('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
	};

	$(document).ready(function() {
		/*var no_auto = "<?php echo $no_auto; ?>";*/
		// Setup Datagrid
		$('#datagrid').datagrid({  
			url:gs_path+'/'+controller+'/getdata', 
			queryParams: $('#fm_search').serializeObject(),
			height:450,
			pagination:true,
			columns:[[
				{ field : 'ck', checkbox:true, width: 40, align: 'center', rowspan:2},
				{ field : 'id_pemakaian', title : 'ID Pemaiakan', width:100, sortable:true, rowspan:2},
				{ field : 'no_toko', title : 'No Toko', width:200, sortable:true, rowspan:2},
				{ field : 'lokasi_tempat', title : 'Lokasi Tempat', width:200, sortable:true, rowspan:2},
				{ field : 'nama_tenant', title : 'Nama Tenant', width:200, sortable:true, rowspan:2},
				{ field : 'jenis_usaha', title : 'Jenis Usaha', width:200, sortable:true, rowspan:2},
				{ field : 'kwh_awal_meter', title : 'KWH Awal Meter', width:200, sortable:true, rowspan:2},
				{ field : 'kwh_akhir_meter', title : 'KWH Akhir Meter', width:200, sortable:true, rowspan:2},
				{ field : 'kwh_pemakaian', title : 'KWH Pemakaian', width:200, sortable:true, rowspan:2},
				{ field : 'tanggal', title : 'Tanggal Penagihan', width:200, sortable:true, rowspan:2},
				]
			]
		});
		 
		// Setup Form
		$('#form_master').setupForm([
			{ name: 'id_pemakaian', type: 'text', size: 'short', maxlength: 45, noempty:true },
			{ name: 'no_toko', text: 'lov', size: 'medium', noempty:true},
			{ name: 'no_toko2', text: 'lov', size: 'short', noempty:true},
			{ name: 'nama_tenant', type: 'text', size: 'long', maxlength: 150, noempty:true },
			{ name: 'lokasi_tempat', type: 'text', size: 'long', maxlength: 200, noempty:true },
			{ name: 'lokasi_tempat2', type: 'text', size: 'long', maxlength: 150, noempty:true },
			{ name: 'jenis_usaha', type: 'text', size: 'long', maxlength: 150, noempty:true },
			{ name: 'kwh_awal_meter', type: 'text', size: 'long', maxlength: 200, noempty:true },
			{ name: 'kwh_akhir_meter', type: 'text', size: 'long', maxlength: 200, noempty:true },
			{ name: 'kwh_pemakaian', type: 'text', size: 'long', maxlength: 200, noempty:true },
			{ name: 'bulan_dari', type: 'text', size: 'short', maxlength: 20},
			{ name: 'tahun_dari', type: 'text', size: 'short', maxlength: 20},
			{ name: 'bulan_sampai', type: 'text', size: 'short', maxlength: 20},
			{ name: 'tahun_sampai', type: 'text', size: 'short', maxlength: 20},
			{ name: 'periode_penagihan', type: 'text', size: 'short', maxlength: 200, readonly:true },
			{ name: 'status', type: 'text', size: 'short', maxlength: 20},
		]);
		

		$('#kwh_akhir_meter').keyup(function() {
			var kwh_awal_meter = parseFloat($('#kwh_awal_meter').val());
			var kwh_akhir_meter = parseFloat($('#kwh_akhir_meter').val());
			var sub_total2 = kwh_akhir_meter - kwh_awal_meter;
			$('#kwh_pemakaian').setval(sub_total2.toFixed(1));
		});
		
		// Create Dialog
		$('#dialog_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:600,
			height:480,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					$('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ 
					var lokasi_tempat = $('#lokasi_tempat').val();
					var no_toko = $('#no_toko').val();
					var id_lokasi = $('#id_lokasi').val();
					$.ajax({
						    	url: gs_path+'/'+controller+'/getLoopCheck/',
						    	type: 'POST',
						    	dataType: 'json',
						    	data: {option : null , lokasi_tempat : lokasi_tempat , no_toko : no_toko, id_lokasi : id_lokasi},
						   	 }).done(function(data){
						   	 	//var mode = data['mode'];
								var set_no_toko = no_toko;
								var set_lokasi = lokasi_tempat;
								var set_id_lokasi = id_lokasi;
								if (data['mode'] == 'Normal') {
									console.log('Normal');
									$.ajax({
									 			url: gs_path+'/'+controller+'/getLoopNormal/',
										    	type: 'POST',
										    	dataType: 'json',
										    	data: {option : null , lokasi_tempat : set_lokasi , no_toko : set_no_toko, id_lokasi : set_id_lokasi},
									 		}).done(function(data){
											 	var no_auto = data['no_auto'];
										   	 	var no_toko = data['no_toko'];
										   	 	var nama_tenant = data['nama_tenant'];
										   	 	var jenis_usaha = data['jenis_usaha'];
										  	 	var lokasi_tempat = data['lokasi_tempat'];
										   	 	var id_lokasi = data['id_lokasi'];
										   	 	$('#nama_tenant').setval(nama_tenant);
										   	 	$('#jenis_usaha').setval(jenis_usaha);
												$('#id_pemakaian').setval(no_auto);
												$('#no_toko').setval(no_toko);
												$('#lokasi_tempat').setval(lokasi_tempat);
												$('#id_lokasi').setval(id_lokasi);	
									 		});
								} else if(data['mode'] == 'Switch') {
									console.log('Switch');
									$('#no_toko').empty();
									 		$.ajax({
									 			url : gs_path+'/'+controller+'/getLoopSwitch/',
									 			type : 'POST',
									 			dataType : 'json',
									 			data : {set_lokasi : set_lokasi, set_no_toko : set_no_toko, set_id_lokasi : set_id_lokasi},
									 		}).done(function(data){
									 			console.log(data);
									 			$('#no_toko').empty();
									 			var lokasi_tempat = data['lokasi_tempat'];
									 			var no_toko = data['no_toko'];
									 			var no_toko_limit = data['no_toko_limit'];
									 			var nama_tenant = data['nama_tenant'];
									 			var jenis_usaha = data['jenis_usaha'];
									 			var id_lokasi = data['id_lokasi'];
									 			var no_auto = data['no_auto'];
									 			$("#id_pemakaian").setval(no_auto);
									 			$("#lokasi_tempat").setval(lokasi_tempat);
									 			$("#nama_tenant").setval(nama_tenant);
									 			$("#jenis_usaha").setval(jenis_usaha);
									 			$("#id_lokasi").setval(id_lokasi);
									 			$.each(data['no_toko'],function(key,val){
									 				$("#no_toko").append('<option id="" value="'+val.no_toko+'">'+val.no_toko+'</option>');
									 			});
									 			$("#no_toko").setval(no_toko_limit);
									 		});
								} else {
									console.log('SwitchAAll');
									$('#no_toko').empty();
									 		$.ajax({
									 			url : gs_path+'/'+controller+'/getLoopSwitchAll/',
									 			type : 'POST',
									 			dataType : 'json',
									 			data : {set_lokasi : set_lokasi, set_no_toko : set_no_toko, set_id_lokasi : set_id_lokasi},
									 		}).done(function(data){
									 			console.log(data);
									 			$('#no_toko').empty();
									 			var lokasi_tempat = data['lokasi_tempat'];
									 			var no_toko = data['no_toko'];
									 			var no_toko_limit = data['no_toko_limit'];
									 			var nama_tenant = data['nama_tenant'];
									 			var jenis_usaha = data['jenis_usaha'];
									 			var id_lokasi = data['id_lokasi'];
									 			var no_auto = data['no_auto'];
									 			$("#id_pemakaian").setval(no_auto);
									 			$("#lokasi_tempat").setval(lokasi_tempat);
									 			$("#nama_tenant").setval(nama_tenant);
									 			$("#jenis_usaha").setval(jenis_usaha);
									 			$("#id_lokasi").setval(id_lokasi);
									 			$.each(data['no_toko'],function(key,val){
									 				$("#no_toko").append('<option id="" value="'+val.no_toko+'">'+val.no_toko+'</option>');
									 			});
									 			$("#no_toko").setval(no_toko_limit);
									 		});
								}
							 });
					$('#datagrid').datagrid('reload'); }} );
					
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#dialog_container').dialog('close');
				}
			}]
		});


		
		
		// Set Action Button
		var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
							resetError();
							$('#toko-1').show();
							$('#toko-2').hide();
							$('#lokasi-1').show();
							$('#lokasi-2').hide();

							 $.ajax({
						    	url: gs_path+'/'+controller+'/getNoAuto/',
						    	type: 'POST',
						    	dataType: 'json',
						    	data: {option : null},
						   	 }).done(function(data){
							 	var no_auto = data['no_auto'];
								$('#id_pemakaian').setval(no_auto);
								$.ajax({
									url: gs_path+'/'+controller+'/getLokasiTempat/',
							    	type: 'POST',
							    	dataType: 'json',
							    	data: {option : null},
								}).done(function(data){
									var lokasi_tempat = data['lokasi_tempat'];
									$("#lokasi_tempat").append('<option id="" value="">(Pilih Lokasi Tempat)</option>');
									$.each(data,function(key,val){
										$("#lokasi_tempat").append('<option id="" value="'+val.lokasi_tempat+'">'+val.lokasi_tempat+'</option>');
									});
								});
							 });



							$('#dialog_container').dialog('open');
							$('#form_master').data('mode', 'create');
							$('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Kontrol Pemakaian Telephone');
							$('#id_pemakaian').readonly(true);
							$('#id_pemakaian, #lokasi_tempat, #no_toko, #nama_tenant, #jenis_usaha, #kwh_awal_meter, #kwh_akhir_meter, #kwh_pemakaian, #tanggal, #status').val('');
							$('#nama_tenant,#kwh_pemakaian,#jenis_usaha').readonly(true);
							$('#status').setval('0');
							$('#no_toko').focus();
							var periode_penagihan = '<?php echo $periode_penagihan; ?>';
							//alert(periode_penahigan);
							$('#periode_penagihan').setval(periode_penagihan);
						} 

						},
						{ label: 'Edit', icon: 'edit', onclick: function() {
							var oSel=$('#datagrid').datagrid('getSelected'); 
							if(oSel==null){ alert('Please select row!'); }
							else{
								$('#toko-1').hide();
								$('#toko-2').show();
								$('#lokasi-1').hide();
								$('#lokasi-2').show();
								
								resetError();
								$('#dialog_container').dialog('open'); 
								$('#form_master').data('mode', 'edit');
								$('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Kontrol Pemakaian Telephone');
								$('#id_pemakaian,#no_toko,').readonly();
								$('#id_pemakaian,#no_toko2,#lokasi_tempat2,#nama_tenant,#jenis_usaha').readonly();
								var kode_str = oSel['tanggal'];
								var kode_edit = kode_str.split('-');
								$('#bulan').setval(kode_edit[0]);
								$('#tahun').setval(kode_edit[1]);
								$('#no_toko2').setval(oSel['no_toko']);
								$('#lokasi_tempat2').setval(oSel['lokasi_tempat']);
								var id_lokasi = oSel['id_lokasi'];
								var periode_penagihan_edit = oSel['tanggal'];
								$('#periode_penagihan').setval(periode_penagihan_edit);
								//alert(id_lokasi);
								$('#nama_tenant,#kwh_pemakaian,#jenis_usaha').readonly(true);
								$('#id_lokasi').setval(id_lokasi);
								//alert(oSel['no_toko']);
								jsonToForm(oSel); $('#id_pemakaian').focus();
							} 
						} },
						{label: 'Delete', icon: 'delete', onclick: function() { 
							var oSel = $('#datagrid').datagrid('getSelected'); 
							if (oSel == null) { 
								$.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
							} else { 
								deleteData(['id_pemakaian']);
							} 
						}},
						{ label: 'Print to Excel', icon: 'print', onclick: function() {
					    	window.location = gs_path + '/pro_print_excel_new/kontrol_pemakaian_listrik/?bulan_dari='+$('#bulan_dari')+'&& tahun_dari='+$('#tahun_dari')+'bulan_sampai='+$('#bulan_sampai')+'&& tahun_sampai='+$('#tahun_sampai');
					    }}];
		setAction(buttons);
		
		
		$('#fm_search').focusFirst();
	});

 		var bersih = function(){
	    	$("#no_toko").append('<option id="" value="">yyyyy</option>');
	    }
//--><!]]></script>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
        	<fieldset>
        		<legend>Filter Per Periode Tagihan</legend>
        		<table class="tb_form" style="margin-bottom:0px">
        		<tr>
        			<td style="width:80px">Dari Bulan</td>
        			<td ><select id="bulan_dari" name="bulan_dari">
        				<option value="01">Januari</option>
        				<option value="02">Februari</option>
        				<option value="03">Maret</option>
        				<option value="04">April</option>
        				<option value="05">Mei</option>
        				<option value="06">Juni</option>
        				<option value="07">Juli</option>
        				<option value="08">Agustus</option>
        				<option value="09">September</option>
        				<option value="10">Oktober</option>
        				<option value="11">November</option>
        				<option value="12">Desember</option>
        				</select>
        				<?php
        				$now = date('Y');
        				$pastYear = $now - 10; 
        				echo "<select id='tahun_dari' name='tahun_dari' >";
        				for ($a=$pastYear;$a<=$now;$a++)
        				{
        					echo"<option value='".$a."''>".$a."</option>";	
        				}
        				echo"</select>";
        				?>
        			</td>
        			<td style="width:80px">Sampai Bulan</td>
        			<td ><select id="bulan_sampai" name="bulan_sampai">
        				<option value="01">Januari</option>
        				<option value="02">Februari</option>
        				<option value="03">Maret</option>
        				<option value="04">April</option>
        				<option value="05">Mei</option>
        				<option value="06">Juni</option>
        				<option value="07">Juli</option>
        				<option value="08">Agustus</option>
        				<option value="09">September</option>
        				<option value="10">Oktober</option>
        				<option value="11">November</option>
        				<option value="12">Desember</option>
        				</select>
        				<?php
        				$now = date('Y');
        				$pastYear = $now - 10; 
        				echo "<select id='tahun_sampai' name='tahun_sampai' >";
        				for ($a=$pastYear;$a<=$now;$a++)
        				{
        					echo"<option value='".$a."''>".$a."</option>";	
        				}
        				echo"</select>";
        				?>*Pilih Print To Excel Untuk Munculkan Report
        			</td> 
        		</tr>
        	</table>
        	</fieldset>
        	<table class="tb_form" style="margin-bottom:0px">
        		<tr>
        			<td width="100">Keyword</td>
        			<td><input type="text" id="keyword" name="keyword" class="textfield medium" />
        				<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
        			</td>
        		</tr>
        	</table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>


<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
	<form id="form_master">
		<table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
			<tr>
				<td><input id="id_lokasi" name="id_lokasi" type="hidden" /></td>
			</tr>
			<tr>
				<td class="label" style="width:45px">ID Pemakaian</td>
				<td><input id="id_pemakaian" /></td>
			</tr>
			<tr id="lokasi-1">
				<td class="label" style="width:100px">Lokasi Tempat</td>
				<td><select id="lokasi_tempat" name="lokasi_tempat"></select></td>
			</tr>
			<tr id="lokasi-2">
				<td class="label" style="width:100px">Lokasi Tempat</td>
				<td><input id="lokasi_tempat2" /></td>
			</tr>
			<tr id="toko-1">
				<td class="label" style="width:150px">No Toko</td>
				<td><select id="no_toko" name="no_toko" ></td>
			</tr>
			<tr id="toko-2">
				<td class="label" style="width:150px">No Toko</td>
				<td><input id="no_toko2" name="no_toko2" /><!-- <button type="button" onclick="bersih()">Hapus List toko</button> --></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Nama Tenant</td>
				<td><input id="nama_tenant" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Jenis Usaha</td>
				<td><input id="jenis_usaha" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">No Telephone</td>
				<td><input id="no_telephone" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Biaya Pemakaian Awal</td>
				<td><input id="biaya_pemakaian_awal" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Biaya Pemakaian Akhir</td>
				<td><input id="biaya_pemakaian_akhir" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Total Pemakaian</td>
				<td><input id="total_pemakaian" /></td>
			</tr>
			<tr>
				<td class="label" style="width:150px">Periode Penagihan</td>
				<td><input id="periode_penagihan" /></td>
			</tr>
	</table>
</form>
</div>

<!-- Modified Chaerul Call ajax, by Rian -->
<script type="text/javascript">

	$("#lokasi_tempat").change(function() {
		var selectedValue = this.value;
		var id_reset = $("id_reset").val();
		$("#id_reset").setval(selectedValue);
		//make the ajax call
		    $.ajax({
		    	url: gs_path+'/'+controller+'/getNoToko/',
		    	type: 'POST',
		    	dataType: 'json',
		    	data: {option : selectedValue},
		    })
		    .done(function(data){ 
		    	var no_toko = data['no_toko'];
		    	//var key_lokasi = data['id_lokasi'];
		    	$("#no_toko").empty();
		    	$("#no_toko").append('<option id="" value="">(Pilih No Toko)</option>');
		    	$.each( data, function( key, val ) {
		    					$("#no_toko").append('<option id="" value="'+val.no_toko+'">'+val.no_toko+'</option>');
		    					$("#no_toko").setval('<option id="" value=""></option>');
							});
								$("#no_toko").change(function() {
									var no_toko_1 = $("#no_toko").val();
									var lokasi_tempat = $("#lokasi_tempat").val();
								    //make the ajax call
								    $.ajax({
								    	url: gs_path+'/'+controller+'/getTenant/',
								    	type: 'POST',
								    	dataType: 'json',
								    	data: {option : no_toko_1 , lokasi : lokasi_tempat},
								    })
								    .done(function(data){
								    		var id_lokasi = data['id_lokasi'];
								    		//alert(id_lokasi);
		    								$("#id_lokasi").setval(id_lokasi);
								    		$("#nama_tenant").setval(data['nama_tenant']);
								    		$("#jenis_usaha").setval(data['jenis_usaha']);
							    });
		    		
		    	
		    	});
		    });
	});


</script>